import type React from 'react';
import {
  attachCurve,
  detachCurve,
  getCurve,
} from '@/components/MapView/Mapless/mana/curve';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  const onDrawCurve = () => {
    const cMan = attachCurve(maplessRef.current, 'cm1');
    cMan?.drawCurve('curve1', {
      coordinates: [
        [113.264, 23.129],
        [113.266, 23.131],
        [113.268, 23.13],
      ],
      lineColor: '#ff0000',
      lineWidth: 2,
    });
    cMan?.drawCurve('curve2', {
      coordinates: [
        [113.27, 23.132],
        [113.272, 23.133],
        [113.274, 23.131],
      ],
      lineColor: '#00ff00',
      lineWidth: 3,
    });
  };

  const onShowCurve = () => {
    const cMan = getCurve(maplessRef.current, 'cm1');
    cMan?.setVisible(!cMan.IsVisible);
  };

  const onClearCurve = () => {
    detachCurve(maplessRef.current, 'cm1');
  };

  return (
    <div className={styles.test}>
      <button type="button" onClick={onDrawCurve}>
        绘制曲线
      </button>
      <button type="button" onClick={onShowCurve}>
        显示/隐藏
      </button>
      <button type="button" onClick={onClearCurve}>
        清除曲线
      </button>
    </div>
  );
};

export default Index;
